<!--  -->
<template>
  <div class="page-container">
    <ex_super_table_page v-bind="option" ref="SuperTablePage" :cell-class-name="cellClassMethod"
      @selection-change="e => selection = e">
    </ex_super_table_page>
    <ex_super_dialog_form ref="formRef" v-bind="formConfig" @afterSubmitSuccess="$refs['SuperTablePage'].reload()" />
    <countryCodeImport ref="importRef" @submitSuccess="$refs['SuperTablePage'].reload()" />
  </div>
</template>
<script>
import countryCodeImport from './dialog/country_code_import.vue';
import country_select from '@/component/tms/country_select'

import superTablePageFunction from '@/mixin/super-table-page-function';

import emitOnFunction from '@/mixin/emit-on-function';
let emitKey = 'tms>>driver_manage'

export default {
  title: 'label_tms_country_code',
  mixins: [superTablePageFunction, emitOnFunction(emitKey)],
  components: { countryCodeImport, country_select, },
  data() {
    return {
      selection: [],

      option: {
        //搜索框内容
        search: {
          model: [
            { label: "label_tms_country_code", key: "countryCode", },
            { label: "label_tms_country_name", key: "countryNameEn", },
            { label: "label_tms_country_zh_name", key: "countryName", },
            { label: "label_status", key: "status", type: 'select', enum: 'IsAvailableStatusEnum', },
          ],
        },
        actionExtra: [
          { label: 'label_base_add', attrs: { type: "primary" }, click: this.clickCreate },
          { label: 'label_enable_disable', attrs: { type: "primary" }, click: this.enableDisableFn },
          {
            label: 'label_import',
            attrs: { type: "primary" },
            click: this.importFn
          },
          { label: 'label_export', attrs: { type: "primary" }, click: this.exportExcel },

        ],
        table: {
          url: "/tms-api/base/TmsCountryRpc/selectByPage.json",
          model: [
            { type: 'selection', clickToggle: true, },
            { key: 'countryCode', label: 'label_tms_country_code', 'min-width': 120, 'show-overflow-tooltip': true, },
            { key: 'countryNameEn', label: 'label_tms_country_name', 'min-width': 120, 'show-overflow-tooltip': true, },
            { key: 'countryName', label: 'label_tms_country_zh_name', 'width': 120, 'show-overflow-tooltip': true, },
            { key: 'status', label: 'label_status', 'width': 120, formatter: (r, c, v, i) => this.$enumShow(v, "IsAvailableStatusEnum") },
            { key: 'creator', label: 'label_create_user', 'width': 100, },
            { key: 'gmtCreate', label: 'label_create_time', 'width': 130, formatter: (r, c, v, i) => this.$dateFormat(v) },
            { key: 'modifier', label: 'label_update_user', 'width': 100, },
            { key: 'gmtModify', label: 'label_update_time', 'width': 130, formatter: (r, c, v, i) => this.$dateFormat(v) },
            {
              type: 'operate', width: 170, operate: [
                {
                  label: 'label_edit', click: (row) => {
                    this.clickCreate(row)
                  }
                },
                {
                  label: 'label_start_using',
                  type: "confirm-button",
                  url: '/tms-api/base/TmsCountryRpc/enableOrDisable.json',
                  message: 'label_sure_to_enable_this',
                  buttonClass: "button_text_success",
                  confirmButtonType: 'success',
                  urlType: 'json',
                  if: (row) => row.status == 'DISABLED',
                  params: (row) => {
                    return { countryIdList: [row["id"]], status: 'ENABLE' }
                  }, done: ['tip', 'reload']
                },
                {
                  label: 'label_disable_using',
                  type: "confirm-button",
                  url: '/tms-api/base/TmsCountryRpc/enableOrDisable.json',
                  message: 'label_tms_confirm_stop',
                  buttonClass: "button_text_danger",
                  confirmButtonType: 'danger',
                  urlType: 'json',
                  if: (row) => row.status == 'ENABLE',
                  params: (row) => {
                    return { countryIdList: [row["id"]], status: 'DISABLED' }
                  }, done: ['tip', 'reload']
                }
              ],
            }
          ],
        }
      },
      formConfig: {
        customClass: "dialog_auto",
        submitUrl: '/tms-api/base/TmsCountryRpc/editTmsCountry.json',
        submitDataHandle: (data) => {
          delete data.tmsCountryChildCodeList
          return data
        },

        form: {
          itemClass: "form_item_default",
          inputClass: "form_input_default",
          // formClass: "form_default_col2 flex_row_wrap",
          default: { tmsCountryChildCodeList: [], tmsCountryChildList: [], tmsCountryType: "SINGLE", },
          model: [
            {
              key: "tmsCountryType",
              label: "label_type",
              type: "select",
              enum: 'TmsCountryTypeEnum',
            },
            {
              key: "countryCode",
              label: "label_tms_country_code",
            },
            {
              key: "countryNameEn",
              label: "label_tms_country_name",
              disabled: (data) => !!data.id,
            },
            {
              key: "countryName",
              label: "label_tms_country_zh_name",
            },
            {
              if: (data) => data.tmsCountryType == 'GROUPE',
              key: "tmsCountryChildCodeList",
              label: "label_child_country",
              render: (h, { data, item }) => {
                const value = data[item.key]
                return h(country_select, {
                  class:"form_input_default",
                  props: { value, multiple: true, },
                  on: {
                    input: (e) => this.$set(data, item.key, e),
                    changeItem: (e) => this.$set(data, 'tmsCountryChildList', e.map(it => ({
                      countryId: it.id,
                      countryCode: it.countryCode,
                      countryName: it.countryName,
                      countryNameEn: it.countryNameEn,
                    }))),
                  },
                })
              }
            }

          ],
          rules: {
            tmsCountryType: {
              required: true,
              message: this.$t("tip_can_no_empty"),
              trigger: "blur",
            },
            countryCode: {
              required: true,
              message: this.$t("tip_can_no_empty"),
              trigger: "blur",
            },
            countryNameEn: {
              required: true,
              message: this.$t("tip_can_no_empty"),
              trigger: "blur",
            },
            countryName: {
              required: true,
              message: this.$t("tip_can_no_empty"),
              trigger: "blur",
            },
          }
        },

      }
    };
  },
  methods: {
    cellClassMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property == 'status') {
        if (row.status == 'ENABLE') {
          return 'color_success'
        } else if (row.status == 'DISABLED') {
          return 'color_danger'
        }
      }
      return ""
    },
    clickCreate(row = {}) {
      const option = {
        title: this.$t('label_tms_country_code'),
        data: {
          id: row.id,
          countryCode: row.countryCode,
          countryName: row.countryName,
          countryNameEn: row.countryNameEn,
          tmsCountryType: row.tmsCountryType,
          tmsCountryChildCodeList:row.tmsCountryChildList? row.tmsCountryChildList.map(it => it.countryCode):[],
          // 初始化的时候如果是编辑，赋值tmsCountryChildList
          tmsCountryChildList:row.tmsCountryChildList? row.tmsCountryChildList.map(it => {
            return {
              countryId: it.id,
              countryCode: it.countryCode,
              countryName: it.countryName,
              countryNameEn: it.countryNameEn,
            }
          }):[]
        },
      }
      this["$refs"]["formRef"].showNew(option);
    },
    exportExcel() {
      this.$downloadFile({
        loading: true,
        type: 'json',
        url: '/tms-api/base/TmsCountryRpc/exportExcel.json',
        data: {
          countryIdList: this.selection.map(it => it.id),
          ...this.getSuperTablePage().getSearchFormData()
        },
      })
    },

    enableDisableFn() {
      if (_.isEmpty(this.selection)) {
        return this.$message.error(this.$tt('tip_please_select_order'))
      }

      const ENABLE = this.selection.every(item => item.status === 'ENABLE')
      const DISABLED = this.selection.every(item => item.status === 'DISABLED')
      if (ENABLE || DISABLED) {
        const msg = DISABLED ? this.$t('label_sure_to_enable_this') : this.$t('label_tms_confirm_stop')
        this.$confirm(msg, this.$t('label_tip'), {
          type: 'warning'
        }).then(() => {
          this.$ajax({
            url: "/tms-api/base/TmsCountryRpc/enableOrDisable.json",
            method: 'post', type: 'json',
            loading: true,
            data: {
              countryIdList: this.selection.map(it => it.id),
              status: ENABLE ? 'DISABLED' : 'ENABLE'
            },
            success: (res) => {
              this.$message.success(this.$tt('tip_operate_success'))
              this.reload()
            },
          })
        })

      } else {
        this.$message.error(this.$tt('label_tms_country_batch_error'))
      }

    },
    importFn() {
      this.$refs.importRef.show()
    }
  }
};

</script>
<style></style>
